<!-- 获取链接 -->
<!-- 获取链接 -->
<template>
  <el-dialog v-model="dialogVisible" width="650" title="获取链接" draggable appendToBody destroyOnClose lockScroll :closeOnClickModal="false">
    <base-skeleton v-if="pageLoad.loadState === true" style="width: 100%; height: 100%; min-height: 400px; padding: 0 20px"></base-skeleton>
    <div v-else-if="pageLoad.loadState === false" style="min-height: 400px">
      <!--
        <el-collapse accordion>
        <el-collapse-item v-for="item in list" :key="item.appId" :name="item.appId" class="item">
        <template #title>
        <div style="display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; width: 100%">
        <span class="title">{{ item.platformName }}</span>
        <span style="color: var(--el-color-info)">详情</span>
        </div>
        </template>
        </el-collapse-item>
        </el-collapse> 
      -->
      <el-collapse accordion>
        <el-collapse-item name="platformName">
          <template #title>
            <div class="link-box">
              <span class="title">平台名称</span>
              <span class="url">{{ linkData.platformName }}</span>
              <el-button link :icon="IconEpCopyDocument" type="primary" @click.stop.prevent="clipboard(linkData.platformName)">复制</el-button>
            </div>
          </template>
          <template #default>
            <div>
              <div style="padding: 0 20px">
                {{ linkData.platformName }}
              </div>
            </div>
          </template>
        </el-collapse-item>
        <el-collapse-item key="el-collapse-item-1" name="appId">
          <template #title>
            <div class="link-box">
              <span class="title">APP ID</span>
              <span class="url">{{ linkData.appId }}</span>
              <el-button link :icon="IconEpCopyDocument" type="primary" @click.stop.prevent="clipboard(linkData.appId)">复制</el-button>
            </div>
          </template>
          <template #default>
            <div>
              <div style="padding: 0 20px">
                {{ linkData.appId }}
              </div>
            </div>
          </template>
        </el-collapse-item>
        <el-collapse-item name="appName">
          <template #title>
            <div class="link-box">
              <span class="title">应用名称</span>
              <span class="url">{{ linkData.appName }}</span>
              <el-button link :icon="IconEpCopyDocument" type="primary" @click.stop.prevent="clipboard(linkData.appName)">复制</el-button>
            </div>
          </template>
          <template #default>
            <div>
              <div style="padding: 0 20px">
                {{ linkData.appName }}
              </div>
            </div>
          </template>
        </el-collapse-item>
        <el-collapse-item v-if="linkData.appOriginalId" key="el-collapse-item-2" name="appOriginalId">
          <template #title>
            <div class="link-box">
              <span class="title">原始 ID</span>
              <span class="url">{{ linkData.appOriginalId }}</span>
              <el-button link :icon="IconEpCopyDocument" type="primary" @click.stop.prevent="clipboard(linkData.appOriginalId)">复制</el-button>
            </div>
          </template>
          <template #default>
            <div>
              <div style="padding: 0 20px">
                {{ linkData.appOriginalId }}
              </div>
            </div>
          </template>
        </el-collapse-item>
        <el-collapse-item name="dramaDetailPath">
          <template #title>
            <div class="link-box">
              <span class="title">推广链接</span>
              <span class="url">
                <span v-if="linkData.appId.startsWith('wx')">{{ linkData.dramaDetailPath }}?{{ linkData.thirdLinkUrl }}</span>
                <span v-else>{{ linkData.dramaDetailPath }}</span>
              </span>
              <el-button
                link
                :icon="IconEpCopyDocument"
                type="primary"
                @click.stop.prevent="
                  clipboard(linkData.appId.startsWith('wx') ? `${linkData.dramaDetailPath}?${linkData.thirdLinkUrl}` : linkData.dramaDetailPath)
                "
              >
                复制
              </el-button>
            </div>
          </template>
          <template #default>
            <div>
              <div style="padding: 0 20px">
                <span v-if="linkData.appId.startsWith('wx')">{{ linkData.dramaDetailPath }}?{{ linkData.thirdLinkUrl }}</span>
                <span v-else>{{ linkData.dramaDetailPath }}</span>
              </div>
            </div>
          </template>
        </el-collapse-item>
        <el-collapse-item v-if="linkData.thirdLinkUrl && !linkData.appId.startsWith('wx')" key="el-collapse-item-3" name="thirdLinkUrl">
          <template #title>
            <div class="link-box">
              <span class="title">推广参数</span>
              <span class="url">{{ linkData.thirdLinkUrl }}</span>
              <el-button link :icon="IconEpCopyDocument" type="primary" @click.stop.prevent="clipboard(linkData.thirdLinkUrl)">复制</el-button>
            </div>
          </template>
          <template #default>
            <div>
              <div style="padding: 0 20px">
                {{ linkData.thirdLinkUrl }}
              </div>
            </div>
          </template>
        </el-collapse-item>
        <el-collapse-item v-if="linkData.thirdLinkUrl && linkData.dramaDetailPath" key="el-collapse-item-4">
          <template #title>
            <div class="link-box">
              <span class="title">星图链接</span>
              <span class="url">{{ linkData.dramaDetailPath }}?{{ linkData.thirdLinkUrl }}</span>
              <el-button link :icon="IconEpCopyDocument" type="primary" @click.stop.prevent="clipboard(`${linkData.dramaDetailPath}?${linkData.thirdLinkUrl}`)">
                复制
              </el-button>
            </div>
          </template>
          <template #default>
            <div>
              <div style="padding: 0 20px">{{ linkData.dramaDetailPath }}?{{ linkData.thirdLinkUrl }}</div>
            </div>
          </template>
        </el-collapse-item>
        <el-collapse-item title="Efficiency" name="massiveMonitorNotifyUrl">
          <template #title>
            <div class="link-box">
              <span class="title">监测链接</span>
              <span class="url">{{ linkData.massiveMonitorNotifyUrl }}</span>
              <el-button link :icon="IconEpCopyDocument" type="primary" @click.stop.prevent="clipboard(linkData.massiveMonitorNotifyUrl)">复制</el-button>
            </div>
          </template>
          <template #default>
            <div>
              <div style="padding: 0 20px">
                {{ linkData.massiveMonitorNotifyUrl }}
              </div>
            </div>
          </template>
        </el-collapse-item>
        <el-collapse-item title="Controllability" name="bottomLinkUrl">
          <template #title>
            <div class="link-box">
              <span class="title">兜底链接</span>
              <span class="url">{{ linkData.bottomLinkUrl }}</span>
              <el-button link :icon="IconEpCopyDocument" type="primary" @click.stop.prevent="clipboard(linkData.bottomLinkUrl)">复制</el-button>
            </div>
          </template>
          <template #default>
            <div>
              <div style="padding: 0 20px">
                {{ linkData.bottomLinkUrl }}
              </div>
            </div>
          </template>
        </el-collapse-item>
      </el-collapse>
    </div>
    <base-empty
      v-else
      style="height: 100%"
      :description="pageLoad.description || ''"
      :imageSize="240"
      :loadState="pageLoad.loadState"
      :pageLoadButton="[{ text: '重新加载', callBack: getBaseDataAxios }]"
    ></base-empty>
  </el-dialog>
</template>

<script setup lang="ts">
  import { type ReferralLinkUrl, getReferralLinkUrl } from '@/api/marketing-management';
  import IconEpCopyDocument from '~icons/ep/copy-document';
  import { useClipboard } from '@vueuse/core';
  type $ShowData = {
    /** 推广链接id  */
    referralLinkId: number;
  };

  const pageLoad = shallowReactive<$PageLoad>({ loadState: true, description: '' });

  const dialogVisible = ref(false);
  const referralLinkId = ref(-1);
  const list = ref<ReferralLinkUrl[]>([]);
  const { copy, isSupported } = useClipboard({ legacy: true });

  const linkData = computed<ReferralLinkUrl>(() => {
    if (Array.isArray(list.value) && list.value.length) {
      return list.value[0] as ReferralLinkUrl;
    }
    return {
      appName: '',
      appId: '',
      bottomLinkUrl: '',
      dramaDetailPath: '',
      massiveMonitorNotifyUrl: '',
      thirdLinkUrl: '',
      appOriginalId: '',
      platformName: '',
    };
  });

  /** 复制 */
  async function clipboard(text: string) {
    if (!isSupported) {
      ElToast.error('您的浏览器不支持复制');
    } else {
      try {
        await copy(text);
        ElToast.success('复制成功');
      } catch (error) {
        ElToast.error('复制失败');
      }
    }
  }

  /** 请求 */
  async function getBaseDataAxios() {
    try {
      pageLoad.loadState = true;
      const res = await getReferralLinkUrl(referralLinkId.value);
      list.value = res.data;
      pageLoad.loadState = false;
    } catch (error) {
      pageLoad.loadState = 'err';
      pageLoad.description = String((error as Record<string, unknown>).msg || '') || '获取数据失败';
    }
  }

  /**
   * 显示
   */
  function show(data: $ShowData) {
    referralLinkId.value = data.referralLinkId;
    dialogVisible.value = true;
    getBaseDataAxios();
  }

  /**
   * 隐藏
   */
  function hide() {
    dialogVisible.value = false;
  }

  defineExpose({ show, hide });
</script>

<style lang="scss" scoped>
  .link-box {
    @include flex(row, nowrap, flex-start, center, center);
    width: 100%;
    height: 80px;
    padding: 15px;
    overflow: hidden;

    .title {
      display: inline-block;
      width: 64px;
      margin-right: 20px;
      font-size: 14px;
      text-align: left;
    }

    .url {
      display: inline-block;
      flex: 1;
      margin-right: 20px;
      overflow: hidden;
      text-align: left;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
</style>
